import Slogan from "@assets/active2Slogan.png";
import BackgroundImg from "@assets/bg01.jpg";
import Dragon from "@assets/dragon_couplets.png";
import Fireworks1 from "@assets/fireworks_1.png";
import Fireworks2 from "@assets/fireworks_2.png";
import NowButton from "@assets/now.png";
import BaseBackground from "@plugin/BaseBackground";
import EnhanceUseNavigate from "@plugin/EnhanceUseNavigate";
import React, { Component } from "react";
import styles from "./index.module.scss";

import { doLucky } from "@api";
import { Toast } from "react-vant";
import { getChannel, getCode } from "../../../utils";
import { CampaignIds } from "../../../utils/ha.common";

const LanternBackground = (props) => {
  return (
    <div className={styles.species_background}>
      <img src={Fireworks1} className={styles.fireworks1} alt="" />
      <img src={Fireworks2} className={styles.fireworks2} alt="" />
      <img src={Fireworks2} className={styles.fireworks3} alt="" />
      {props.children}
    </div>
  );
};
class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showFlag: true,
    };
  }

  componentDidMount() {
    window._ha("send", "action", "cny_activity2_homepage_view", {
      campaign_id: CampaignIds.activity2,
      channel: getChannel(),
      code: getCode(),
    });
  }

  handlerClick = async () => {
    const { state, data } = await doLucky();
    if (state === "ok") {
      if (data.lottery_result === 0) return Toast("未抽中");
      this.props.navigate(
        `/activity_result_2?lottery_result=${data.lottery_result}&reward_id=${data.id}`
      );
    }

    window._ha("send", "action", "cny_activity2_homepage_raffle_click", {
      campaign_id: CampaignIds.activity2,
      channel: getChannel(),
      code: getCode(),
    });
  };

  render() {
    const { showFlag } = this.state;
    return (
      <>
        <BaseBackground backgroundImage={BackgroundImg} showFlag={showFlag}>
          <LanternBackground>
            <div className={styles.header_box}>
              <div className={styles.slogan_box}>
                <img src={Slogan} className={styles.slogan} alt="" />
              </div>
            </div>

            <img src={Dragon} className={styles.dragon} alt="" />

            <div className={styles.cloud_bg}>
              <img
                onClick={this.handlerClick}
                src={NowButton}
                className={styles.now_button}
                alt=""
              />
            </div>
          </LanternBackground>
        </BaseBackground>
      </>
    );
  }
}

export default EnhanceUseNavigate(Index);
